<template>
  <div class="notification-container">
    <transition-group name="notification-slide">
      <div
          v-for="notification in notifications"
          :key="notification.id"
          class="notification"
          :class="notification.type"
      >
        <div class="notification-content">
          <span class="notification-icon" v-html="notification.icon"></span>
          <span class="notification-message">{{ notification.message }}</span>
        </div>
        <button class="notification-close" @click="closeNotification(notification.id)">
          &times;
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 通知消息列表
const notifications = ref([]);

// 添加通知
const show = (message, type = 'info', duration = 3000) => {
  const id = Date.now(); // 使用时间戳作为唯一 ID
  const icon = getIconByType(type); // 根据类型获取图标
  notifications.value.push({ id, message, type, icon, duration });

  // 自动关闭
  if (duration > 0) {
    const timeoutId = setTimeout(() => {
      closeNotification(id);
    }, duration);
    notificationTimeouts[id] = timeoutId;
  }
};

// 关闭通知
const closeNotification = (id) => {
  notifications.value = notifications.value.filter((n) => n.id !== id);
  clearTimeout(notificationTimeouts[id]);
  delete notificationTimeouts[id];
};

// 根据类型获取图标（使用 SVG）
const getIconByType = (type) => {
  switch (type) {
    case 'success':
      return `
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
      `;
    case 'warning':
      return `
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12" y2="17"></line>
        </svg>
      `;
    case 'error':
      return `
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="15" y1="9" x2="9" y2="15"></line>
          <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
      `;
    default:
      return `
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="16" x2="12" y2="12"></line>
          <line x1="12" y1="8" x2="12" y2="8"></line>
        </svg>
      `;
  }
};

// 存储定时器 ID
const notificationTimeouts = {};

// 暴露方法给外部使用
defineExpose({ show });
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.9), rgba(42, 82, 152, 0.9));
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
  );
  animation: flow 2s linear infinite;
}

@keyframes flow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-icon {
  width: 24px;
  height: 24px;
  color: inherit;
}

.notification-message {
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.notification-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.notification-close:hover {
  opacity: 1;
}

/* 动画效果 */
.notification-slide-enter-active,
.notification-slide-leave-active {
  transition: all 0.4s ease;
}

.notification-slide-enter-from,
.notification-slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

/* 不同类型通知的样式 */
.notification.info {
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.9), rgba(42, 82, 152, 0.9));
}

.notification.success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(102, 187, 106, 0.9));
}

.notification.warning {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(255, 167, 38, 0.9));
}

.notification.error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.9), rgba(239, 83, 80, 0.9));
}
</style>